<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>png-fix test</title>
<link href="../css/960.css" rel="stylesheet" type="text/css"/>
<link href="../css/webui.css" rel="stylesheet" type="text/css"/>
<script src="../js/lib/iepngfix/iepngfix_tilebg.js" type="text/javascript"></script>
<style type="text/css">
	  .show{
	height:200px;
	width:200px;
	background:url(../resources/iepngfix/opacity.png);
}
	  
	  
</style>
</head>

<body>
<div class="reference">
	<h1>本例展示了如何在ie6浏览器中显示透明png图片和用透明png图片做背景 </h1>	

<h2> pngFix主要包含3个文件: </h2>
<div class="box">
        <p> <span class="green">iepngfix.htc</span> (styles/iepngifx.htc)</p>
        <p> <span class="green">blank.gif</span> (images/webui/blank.gif)</p>
        <p> <span class="green">iepngfix_tilebg.js</span> (../css/iepngfix/iepngfix_tilebg.js) (<span class="blue">这个javascript脚本是为了使css用png做背景后也能保持透明)</span></p>
 </div>              


<h2> CSS写法：</h2>
<div class="box">            
<p>behavior: url(styles/iepngfix.htc); </span>url里面的写法和普通backgournd写法不同，.htc的路径是相对于网站根目录，如果网站在线
          需要写成<span class="blue">behavior: url(../css/iepngfix/iepngfix.htc); </span> 主要是第一个斜杠的写法不同，一个是相对路径一个是绝对路径，如果是在线网站请使用绝对路径
          </p>     
          
          <p><span class="red">需要注意：</span>如果blank不在根目录下则需要修改iepngfix.htc文件，用编辑器打开后编辑成<span class="orange">IEPNGFix.blankImg = '/images/blank.gif';
          </span>本例中修改成<span class="orange">IEPNGFix.blankImg = 'images/webui/blank.gif';</span>(本例不在线，所以用的相对路径)</p>
</div>
          
          <p>通过上面的配置后只需要在 html标签中需要修正png透明的地方加上class="pngFix"就可以了</p>
              <p>&nbsp;</p> 
               
       <h2>这个是css 文件中包含透明png背景示例</h2>        
      <div class="pngFix show"></div>
      <h2>代码</h2>
      <div class="code">
        <pre>
     &lt;div class="pngFix show"&gt;&lt;/div&gt; 
    
    css
    
    .show{
	height:200px;
	width:200px;
	background:url(../resources/iepngfix/opacity.png);
    }
        </pre>
      
      </div>
        <p>&nbsp;</p>
          <p>&nbsp;</p>
          
       <h2>这个是img标签使用透明png示例</h2>    
      <img src="../resources/iepngfix/opacity2.png" class="pngFix"/>
      <h2>代码</h2>
      <div class="code">
        <pre> &lt;img src="../resources/iepngfix/opacity2.png" class="pngFix"/&gt; </pre>
      
      </div>
</div>
</body>
</html>
